<template>
  <div>
    <a-modal
      :title="title"
      :visible="visible"
      :confirmLoading="confirmLoading"
      :width="width"
      @ok="handleOk"
      @cancel="handleCancel">
      <a-spin :spinning="spinning">
        <a-form :form="form">
          <div style="width: 100%;margin-left: 8%;padding-bottom: 10px;" v-if="supportWehcat">
            <input v-model="url" class="artileInput" placeholder="请复制您的公众号的文章链接地址到此然后点击 按钮"/>
            <a-button type="primary" style="margin-left: 5px" size="small" @click="article(1)"> 公众号同步</a-button>
            <a-button type="primary" style="margin-left: 5px" size="small" @click="reSetUrl">重置地址</a-button>
          </div>

          <div style="width: 100%;margin-left: 8%;padding-bottom: 10px;" v-if="supportTops">
            <input v-model="topUrl" class="artileInput" placeholder="请复制您的头条的文章链接地址到此然后点击 按钮,如同步失败 多试几次或者设置 cookie"/>
            <a-button type="primary" style="margin-left: 5px" size="small" @click="article(2)">头  条  同  步</a-button>
            <a-button type="primary" style="margin-left: 5px" size="small" @click="reSetCookie">重置cookie</a-button>
          </div>

          <div style="width: 100%;margin-left: 8%;">
            <input v-model="cookies" style="width: 84%;" v-show="topUrl && !isSetOk" placeholder="如果同步失败 请打开浏览器F12 复制您的头条 cookie 到此处后点击 cookie 设置 后再同步 或多试几次 "/>
            <a-button v-show="topUrl && !isSetOk" type="primary" style="margin-left: 5px" size="small" @click="setTopCookie">cookie 设置</a-button>
          </div>

          <dynamic-forms ref="dynamicForms" :form="form" @submit="submit"></dynamic-forms>
        </a-form>
      </a-spin>
    </a-modal>
  </div>
</template>
<script>
  import DynamicForms from './DynamicForms.vue'
  // import jsonp from 'fetch-jsonp'
  import storage from 'store'
  import { wechatArticle } from '@/api/site/content'
  export default {
    components: {
      DynamicForms
    },
    props: {
      width: {
        type: String,
        default: '70%',
        required: false
      },
      title: {
        type: String,
        default: '表单管理',
        required: false
      }
    },
    data () {
      return {
        form: this.$form.createForm(this),
        visible: false,
        spinning: false,
        modelId: null,
        cookies: null,
        isSetOk: false,
        url: null,
        topUrl: null,
        supportWehcat: false,
        supportTops: false,
        confirmLoading: false
      }
    },
    created () {
      const cookie = storage.get('TOP_COOKIE')
      if (cookie) {
        this.cookies = cookie
        this.isSetOk = true
      }
    },
    methods: {
      initForm (models) {
        console.log(models)
        const _this = this
        this.spinning = true
        this.openModal()
         if (models) {
            setTimeout(() => {
               _this.$refs.dynamicForms.setFields(models)
            }, 300)
         }
         setTimeout(() => {
            _this.spinning = false
         }, 300)
      },
      setModelId (modelId) {
        this.modelId = modelId
      },
      setSupportTops (val) {
         this.supportTops = val
      },
      setSupportWehcat (val) {
         this.supportWehcat = val
      },
      openModal () {
         this.visible = true
      },
      submit (data) {
         this.$emit('submit', data)
      },
      setTopCookie () {
         if (this.cookies) {
                storage.set('TOP_COOKIE', this.cookies)
                this.isSetOk = true
                this.$message.info('设置成功!')
         } else {
           this.$message.error('请输入cookie')
         }
      },
      handleOk (e) {
          this.$refs.dynamicForms.submitFrom()
      },
      article (type) {
        const aurl = type === 1 ? this.url : this.topUrl
        const _this = this
        if (aurl) {
          this.spinning = true
          wechatArticle({ url: aurl, modelId: this.modelId, type: type, cookie: this.cookies }).then(response => {
              this.initForm(response.res.models)
              this.spinning = false
          })
          setTimeout(() => {
             _this.spinning = false
          }, 20000)
        }
      },
      reSetCookie () {
        this.isSetOk = false
      },
      reSetUrl () {
        this.url = null
        this.topUrl = null
      },
      handleCancel (e) {
        const _this = this
        this.$emit('beforeClose')
        setTimeout(() => {
           _this.visible = false
        }, 150)
        this.reSetUrl()
        this.$emit('close')
      },
      cleanForm () {
         this.$refs.dynamicForms.resetFieldsClear(true)
      }

    }
  }
</script>
<style>
  .artileInput{
    width: 77%;
    border-radius:3px;
    border: 1px solid #cacaca;
    height: 30px;
  }
</style>
